<template>
  <div>
    <div class="zt">
      <el-row>
        <el-col style="margin: 10px 0" span="6" v-for="p in arr">
          <el-card style="margin: 10px 20px">
            <a :href="'/deil?id='+p.id"><img class="p_img" :src="p.url" width="100%">
              <div>
                <p style="font-size: 15px;height: 40px;margin-top: 0">
                  {{ p.goodsName }}
                </p>

                <p style="font-size: 12px;color: #666">
                  <span>价格:</span>
                  {{ p.money }}
                  库存:{{ p.num }}
                </p>
                <p style="font-size: 12px;color: #666">
                  出版社:{{ p.pressName }}
                </p>
                <p style="font-size: 12px;color: #666">
                  <span>销量:{{ p.nums }}件</span>
                </p>
              </div>
            </a>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="综合排序" name="sortById">
        <div>
          <el-row>
            <el-col style="margin: 10px 0" span="6" v-for="p in productArr">
              <el-card style="margin: 10px 20px">
                <a :href="'/deil?id='+p.id"><img class="p_img" :src="p.url" width="100%"></a>
                <div>
                  <p style="font-size: 15px;height: 40px;margin-top: 0">
                    {{ p.goodsName }}
                  </p>

                  <p style="font-size: 12px;color: #666">
                    <span>价格:</span>
                    {{ p.money }}
                    库存:{{ p.num }}
                  </p>
                  <p style="font-size: 12px;color: #666">
                    出版社:{{ p.pressName }}
                  </p>
                  <p style="font-size: 12px;color: #666">
                    <span>销量:{{ p.nums }}件</span>
                  </p>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </div>
      </el-tab-pane>
      <el-tab-pane label="价格" name="sortByMoney">
        <div>
          <el-row>
            <el-col style="margin: 10px 0" span="6" v-for="p in productArr">
              <el-card style="margin: 10px 20px">
                <a :href="'/deil?id='+p.id"><img class="p_img" :src="p.url" width="100%"></a>
                <div>
                  <p style="font-size: 15px;height: 40px;margin-top: 0">
                    {{ p.goodsName }}
                  </p>

                  <p style="font-size: 12px;color: #666">
                    价格:{{ p.money }} 库存:{{ p.num }}
                  </p>
                  <p style="font-size: 12px;color: #666">
                    出版社:{{ p.pressName }}
                  </p>
                  <p style="font-size: 12px;color: #666">
                    <span>销量:{{ p.nums }}件</span>
                  </p>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </div>
      </el-tab-pane>
      <el-tab-pane label="销量" name="sortByNums">
        <div>
          <el-row>
            <el-col style="margin: 10px 0" span="6" v-for="p in productArr">
              <el-card style="margin: 10px 20px">
                <a :href="'/deil?id='+p.id"><img class="p_img" :src="p.url" width="100%"></a>
                <div>
                  <p style="font-size: 15px;height: 40px;margin-top: 0">
                    {{ p.goodsName }}
                  </p>

                  <p style="font-size: 12px;color: #666">
                    价格:{{ p.money }} 库存:{{ p.num }}
                  </p>
                  <p style="font-size: 12px;color: #666">
                    出版社:{{ p.pressName }}
                  </p>
                  <p style="font-size: 12px;color: #666">
                    <span>销量:{{ p.nums }}件</span>
                  </p>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </div>
      </el-tab-pane>
      <el-tab-pane label="评论" name="sortByComment">
        <div>
          <el-row>
            <el-col style="margin: 10px 0" span="6" v-for="p in productArr">
              <el-card style="margin: 10px 20px">
                <a :href="'/deil?id='+p.id"><img class="p_img" :src="p.url" width="100%"></a>
                <div>
                  <p style="font-size: 15px;height: 40px;margin-top: 0">
                    {{ p.goodsName }}
                  </p>

                  <p style="font-size: 12px;color: #666">
                    价格:{{ p.money }} 库存:{{ p.num }}
                  </p>
                  <p style="font-size: 12px;color: #666">
                    出版社:{{ p.pressName }}
                  </p>
                  <p style="font-size: 12px;color: #666">
                    <span>销量:{{ p.nums }}件</span>
                  </p>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </div>
      </el-tab-pane>
      <el-tab-pane label="出版时间" name="sortByTime">
        <div>
          <el-row>
            <el-col style="margin: 10px 0" span="6" v-for="p in productArr">
              <el-card style="margin: 10px 20px">
                <a :href="'/deil?id='+p.id"><img class="p_img" :src="p.url" width="100%"></a>
                <div>
                  <p style="font-size: 15px;height: 40px;margin-top: 0">
                    {{ p.goodsName }}
                  </p>

                  <p style="font-size: 12px;color: #666">
                    价格:{{ p.money }} 库存:{{ p.num }}
                  </p>
                  <p style="font-size: 12px;color: #666">
                    出版社:{{ p.pressName }}
                  </p>
                  <p style="font-size: 12px;color: #666">
                    <span>销量:{{ p.nums }}件</span>
                  </p>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  data() {
    return {
      productArr: {
        url: '',
        goodsName: '',
        money: '',
        num: '',
        pressName: '',
        nums: ''
      },
      arr: {
        url: '',
        goodsName: '',
        money: '',
        num: '',
        pressName: '',
        nums: ''
      },
      activeName: 'sortById',
      isShow: '',
    }
  },
  methods: {
    loadSearch(text, id) {
      //URLDecoder.decoder(this.gooodsName,"utf-8");
      let goodsName = this.qs.stringify(this.text);
      let categoryId = this.qs.stringify(this.id);
      console.log('search');
      // console.log('在localStorage中的JWT数据：' + localStorage.getItem('jwt'));
      let url = 'http://localhost:8080/goods/search';
      console.log('url = ' + url);
      this.axios
          //.create({'headers': {'Authorization': localStorage.getItem('jwt')}})
          .get(url + goodsName + categoryId).then((response) => {
        let responseBody = response.data;
        this.arr = responseBody.data;
      });
    },
    sortById() {
      console.log('searchListById');
      // console.log('在localStorage中的JWT数据：' + localStorage.getItem('jwt'));
      let url = 'http://localhost:8080/goods/searchListById';
      console.log('url = ' + url);
      this.axios
          //.create({'headers': {'Authorization': localStorage.getItem('jwt')}})
          .get(url).then((response) => {
        let responseBody = response.data;
        this.productArr = responseBody.data;
      });
    },
    sortByNums() {

      console.log('searchListByNums');
      // console.log('在localStorage中的JWT数据：' + localStorage.getItem('jwt'));
      let url = 'http://localhost:8080/goods/searchListByNums';
      console.log('url = ' + url);
      this.axios
          //.create({'headers': {'Authorization': localStorage.getItem('jwt')}})
          .get(url).then((response) => {
        let responseBody = response.data;
        this.productArr = responseBody.data;
      });
    },
    sortByComment() {
      console.log('sortByComment');
      // console.log('在localStorage中的JWT数据：' + localStorage.getItem('jwt'));
      let url = 'http://localhost:8080/goods/searchListByComments';
      console.log('url = ' + url);
      this.axios
          //.create({'headers': {'Authorization': localStorage.getItem('jwt')}})
          .get(url).then((response) => {
        let responseBody = response.data;
        this.productArr = responseBody.data;
      });
    },
    sortByTime() {

      console.log('searchListByHouseTime');
      // console.log('在localStorage中的JWT数据：' + localStorage.getItem('jwt'));
      let url = 'http://localhost:8080/goods/searchListByHouseTime';
      console.log('url = ' + url);
      this.axios
          //.create({'headers': {'Authorization': localStorage.getItem('jwt')}})
          .get(url).then((response) => {
        let responseBody = response.data;
        this.productArr = responseBody.data;
      });
    },
    sortByMoney() {
      console.log('searchListByMoney');
      // console.log('在localStorage中的JWT数据：' + localStorage.getItem('jwt'));
      let url = 'http://localhost:8080/goods/searchListByMoney';
      console.log('url = ' + url);
      this.axios
          //.create({'headers': {'Authorization': localStorage.getItem('jwt')}})
          .get(url).then((response) => {
        let responseBody = response.data;
        this.productArr = responseBody.data;
      });
    },

    handleClick(tab, event) {
      if (tab.name == 'sortById') {
        this.sortById();
      } else if (tab.name == 'sortByMoney') {
        this.sortByMoney();
      } else if (tab.name == 'sortByNums') {
        this.sortByNums();
      } else if (tab.name == 'sortByComment') {
        this.sortByComment();
      } else if (tab.name == 'sortByTime') {
        this.sortByTime();
      }

    },
    handleClick1(tab, event) {
      if (tab.name == 'loadSearch') {
        this.loadSearch(this.goodsName, this.categoryId);
      }
    },

  },
  mounted() {
    this.sortById();
    let text = location.search.split("?")[1].split("&")[0].split("=")[1];
    console.log("text:" + text);
    let id = location.search.split("?")[1].split("&")[1].split("=")[1];
    console.log("id:" + id);
    this.loadSearch(text, id);
  }

};
</script>
<style>
.el-tabs {
  width: 82.5%;
  margin-left: 8.8%
}

.el-tab-pane {
  align-items: center;
}

.zt {
  width: 82.5%;
  margin-left: 8.8%
}
</style>